<template>
	<!-- #ifdef H5 -->
	<view class="scene-h5">
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<view class="scene">
			<!-- #endif -->
			<view style="flex: 3">
				<scroll-view :scroll-x="true" style="width: calc(100vw - 25vw - 40rpx); white-space: nowrap">
					<template v-for="(item, index) in sceneList">
						<view :key="item.sceneId" @tap="onBindtapScene(item)"
							style="display: inline-block; width: 23vw">
							<image :src="item.iconValueEncode" lazy-load
								:style="'width:64rpx;height:64rpx;border-radius:100%; background:' + (item.isEnable === 1 ? item.colorValue : '#C1E1DD')">
							</image>
							<view :class="item.isEnable === 1 ? 'selected' : ''" style="font-size: 24rpx">
								{{ item.sceneName }}</view>
						</view>
					</template>
				</scroll-view>
			</view>
			<view @tap="onBindtapStop" style="flex: 1">
				<image src="https://statics.xmcsrv.net/weixin/disarming-HL.svg" lazy-load
					style="width: 64rpx; height: 64rpx"></image>
				<view class="selected" style="font-size: 24rpx">撤防</view>
			</view>
		</view>
</template>

<script>
	// pages/device/home/scene/scene.js
	export default {
		data() {
			return {
				sceneList: [] // 场景列表
			};
		},
		beforeMount: function() {
			this.getSceneList();
		},
		onPageShow: function() {
			this.getSceneList();
		},
		methods: {
			/** ======================== 场景操作 ================================ */
			// 查询场景列表
			getSceneList() {
				const data = {
					groupId: uni.getStorageSync('currentGroupId') // getApp().globalData.currentGroupId
				};
				getApp().globalData.api.getSceneList(data, (result) => {
					console.log('查询场景列表:', result);
					result.forEach((item) => {
						item.iconValueEncode =
							`${getApp().globalData.iconUrl}?rgb=${encodeURIComponent('#FFFFFF')}&url=${item.iconValue}`;
					});
					this.sceneList = result
				});
			},
			// 开启/停用场景
			onBindtapScene(ev) {
				uni.showLoading();
				let scene = ev // 开启
				if (scene.isEnable === 0) {
					this.sceneList.forEach((item) => {
						if (item.isEnable === 1) {
							this.stopScene(item.sceneId, false);
						}
					});
					this.startScene(scene.sceneId);
				} // 停用
				else {
					this.stopScene(scene.sceneId);
				}
			},
			// 开启场景
			startScene(sceneId) {
				getApp().globalData.api.startScene({
						sceneId: sceneId
					},
					(result) => {
						console.log('开启场景:', result);
						uni.hideLoading({
							success: (res) => {
								this.getSceneList();
							}
						});
					}
				);
			},
			// 停用场景
			stopScene(sceneId, callback = true) {
				getApp().globalData.api.stopScene({
						sceneId: sceneId
					},
					(result) => {
						console.log('停用场景:', result);
						if (callback) {
							uni.hideLoading({
								success: (res) => {
									this.getSceneList();
								}
							});
						}
					}
				);
			},
			// 一键撤防
			onBindtapStop() {
				uni.showLoading();
				const data = {
					groupId: uni.getStorageSync('currentGroupId') //getApp().globalData.currentGroupId
				};
				getApp().globalData.api.stopGroupScenes(data, (result) => {
					console.log('一键撤防:', result);
					uni.hideLoading({
						success: (res) => {
							this.getSceneList();
						}
					});
				});
			}
		}
	};
</script>
<style>
	.scene {
		display: flex;
		height: 120rpx;
		overflow: hidden;
		padding: 20rpx;
		margin: 80rpx 20rpx 20rpx;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		background: #ffffff;
		border-radius: 10rpx;
		color: #999999;
	}

	.scene-h5 {
		display: flex;
		height: 120rpx;
		overflow: hidden;
		padding: 20rpx;
		margin: 20rpx;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		background: #ffffff;
		border-radius: 10rpx;
		color: #999999;
	}

	.scene .selected,
	.scene-h5 .selected {
		color: #FF0025;
	}
</style>
